<template>
    <div class="member-card-container">
        <div class="card-wrapper">
            <!--<div class="mlogo">-->
                <!--&lt;!&ndash;<div class="mcard_logo"><img src="http://sqqimg.b0.upaiyun.com/2017/07/14/5663a6a2e52342b1b426e684176f0ac212.jpg" alt="">佛山中海环宇城</div>&ndash;&gt;-->
                <!--&lt;!&ndash;<div class=""><li id="scan"><img src="http://res.mallshow.net/wx/img/weixin2/sweep.png"></li></div>&ndash;&gt;-->
                <!--<van-row>-->
                    <!--&lt;!&ndash;<van-col span="20">&ndash;&gt;-->
                        <!--&lt;!&ndash;<div class="mcard_logo"><img&ndash;&gt;-->
                                <!--&lt;!&ndash;src="http://sqqimg.b0.upaiyun.com/2017/07/14/5663a6a2e52342b1b426e684176f0ac212.jpg">&ndash;&gt;-->
                            <!--&lt;!&ndash;<span class="title">演艺中心</span>&ndash;&gt;-->
                        <!--&lt;!&ndash;</div>&ndash;&gt;-->
                    <!--&lt;!&ndash;</van-col>&ndash;&gt;-->
                    <!--&lt;!&ndash;<van-col span="4">&ndash;&gt;-->
                        <!--&lt;!&ndash;<div class="sweep">&ndash;&gt;-->
                            <!--&lt;!&ndash;<div id="scan"><img src="http://res.mallshow.net/wx/img/weixin2/sweep.png" @click="goToView('/take_photo')"></div>&ndash;&gt;-->
                        <!--&lt;!&ndash;</div>&ndash;&gt;-->
                    <!--&lt;!&ndash;</van-col>&ndash;&gt;-->
                <!--</van-row>-->

            <!--</div>-->
            <!--<div class="cards-box" @click="changeCardSide">-->
                    <!--&lt;!&ndash; 正面 &ndash;&gt;-->
                    <!--<div class="card-front" ref="cards" >-->
                        <!--<div class="pic">-->
                            <!--<img src="http://sqqimg.b0.upaiyun.com/2018/01/26/75d0c80b80444ea48963ccc6e46a9edd45.jpg">-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--&lt;!&ndash; 反面 &ndash;&gt;-->
                    <!--<div class="card-back" ref="cards">-->
                        <!--<div class="pic">-->
                            <!--<img src="http://sqqimg.b0.upaiyun.com/2017/07/28/d5686924e4df4717a882bc02683d2db640.jpg">-->
                        <!--</div>-->
                    <!--</div>-->
            <!--</div>-->
            <!-- 二维码 -->
            <div class="new-qrcode">
                <img src="http://res.mallshow.net/wx/img/weixin2_1/qcode.png" alt="二维码" class="qcode" @click="qrcodeShow">
            </div>

            <div v-show="pop_div" class="pop-layer">
                <div class="pop-layer--box">
                    <div class="qrcode">
                        <div>使用时请将此二维码出示给工作人员</div>
                        <div class="erma">
                            <canvas id="msg"></canvas>
                        </div>
                    </div>
                </div>
                <div class="del" @click="qrcodeShow">X</div>
            </div>
        </div>
        <div class="card_detiail">
            <div class="vip_info" style="background-color: #F1F5F8;padding-top: 10px;">
                <div class="vip_t card_no">
                    卡号：<span>{{cardNo}}</span>
                </div>
            </div>
            <div class="vip_info">
                <div class="info_cont vip_lv">会员等级：{{levelName}}</div>
                <div class="info_cont vip_jf">积分值：<em>{{score}}</em></div>
            </div>
        </div>
        <div class="my_grow">
            <h2 class="vip_t grow_no" style="border-top: 1px solid #e0e8f3;">我的成长值

            </h2>
            <div class="card_lv">
                <div class="step_a">{{levelName}}</div>
                <div v-show="level_div">
                    <div class="progress_a" p-data="0.65"><div class="pg-bar"></div></div>
                    <div class="step_b">{{nextLevelName}}</div>
                </div>
            </div>
            <div v-show="score_div">
                <p class="uplv_p">还差<em>{{scoreLeft}}</em>积分升级至<span>{{nextLevelName}}</span></p>
            </div>
            <p class="uplv_p"><span>1、年积分累积满15000分可自动升为白金会员，升级不扣减积分。<br>
									2、自升级之日起，有效期1年。1年内依据新增积分的分值，维持/调整到对应级别。<br>
									3、白金会员享每月30元停车券赠送，当月有效。</span></p>

        </div>
    </div>
</template>

<script>
    import {Toast,Dialog} from 'vant';
    import QRCode from 'qrcode';
    import Cookies from 'js-cookie';
    export default {
        name: "MemberCard",
        data(){
            return{
                status:true,
                token:'',
                cardNo:'',
                levelName:'',
                nextLevelName:'',
                score:'',
                scoreLeft:'',
                level_div:true,
                score_div:true,
                pop_div:false,
            }
        },
        mounted(){
            this.token = Cookies.get("token")
            console.log(this.token)
            this.$api.personInf.personMemberCard({openid:this.token}).then(res=>{
                if(res.code==0){
                    var data = JSON.parse(res.data)
                    var success = data.success;
                    console.log("data:" + data)
                    if(success) {
                        this.cardNo = data.cardNo;
                        this.levelName = data.levelName;
                        this.nextLevelName = data.nextLevelName;
                        this.score = data.score;
                        this.scoreLeft = data.scoreLeft;
                        if(this.nextLevelName == undefined){
                            this.level_div = false
                            this.score_div = false
                        }
                    }else{
                        var msg = data.msg;
                        Toast(msg)
                        return
                    }
                }
            }).catch(err=>{
                console.log(err)
            })
        },
        methods:{
            changeCardSide(){
                if(this.status){
                    document.querySelector(".cards-box .card-front").style.transform='rotateX(180deg)'
                    document.querySelector(".cards-box .card-back").style.transform='rotateX(0deg)'
                }else{
                    document.querySelector(".cards-box .card-front").style.transform='rotateX(0deg)'
                    document.querySelector(".cards-box .card-back").style.transform='rotateX(-180deg)'
                }
                this.status=!this.status
            },
            goToView(path){
                this.$router.push(path)
            },
            qrcodeShow(){
                this.pop_div = !this.pop_div
                var msg= document.getElementById('msg')
                QRCode.toCanvas(msg, this.token, function (error) {
                    console.log(error)
                })
                msg.style.width = "256px"
                msg.style.height = "256px"
            }
        }
    }
</script>

<style lang="less" scoped>
    @import "../../assets/less/base";
    .member-card-container {
        .card-wrapper {
            position: relative;
            /*height: 200px;*/
            height: 100px;
            background-color: @main-theme-color;
            .mlogo {
                padding-top: 10px;
                .mcard_logo {
                    padding-left: 20px;
                    img {
                        width: 30px;
                        height: 30px;
                        border-radius: 50%;
                        vertical-align: top;
                    }
                    height: 30px;
                    line-height: 30px;
                    .title{
                        padding-left: 10px;
                    }
                }
                .sweep {
                    img{
                        width: 30px;
                        height: 30px;
                    }
                }
            }
            .cards-box {
                .pic {
                    img {
                        display: block;
                        margin: 0 auto;
                        width: 60%;
                    }
                }
                .card-front {
                    position: absolute;
                    bottom: 0;
                    backface-visibility: hidden;
                    transition: 1s;
                }
                .card-back {
                    position: absolute;
                    bottom: 0;
                    transform: rotateX(-180deg);
                    backface-visibility: hidden;
                    transition: 1s;
                }
            }
            .new-qrcode{
                position: absolute;
                left: 50%;
                bottom: -25px;
                margin-left: -25px;
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background-color: #fff;
                z-index:20;
                img{
                    display: block;
                    margin: 10px auto;
                    width: 30px;
                    height: 30px;
                }
            }
        }
    }
    .clearfix {
        display: block;
    }
    .card_detiail {
        position: relative;
        color: #627e94;
    }
    .vip_t {
        padding: 3%;
        color: #3e4b5d;
        font-size: 14px;
        font-weight: normal;
        text-indent: 2.125rem;
    }
    .vip_t.card_no {
        line-height: 30px;
        overflow: hidden;
        background: url(/images/weixin2/vipcard02.png) 5% center no-repeat;
        background-size: 1.5rem;
        border-bottom: 1px solid #e0e8f3;
    }
    .vip_t.grow_no {
        line-height: 30px;
        overflow: hidden;
        background: url(/images/weixin2/vipcard04.png) 5% center no-repeat;
        background-size: 1.5rem;
        border-bottom: 1px solid #e0e8f3;
    }
    .vip_lv {
        border-right: 1px solid #e0e8f3;
        background: url(/images/weixin2/vipcard01.png) 10% center no-repeat;
        background-size: 1.5rem;
        text-indent: 2.125rem;
    }
    .vip_info .info_cont {
        width: 50%;
        float: left;
        padding: 5% 0 5% 5%;
        background-color: #fff;
        box-sizing: border-box;
        font-size: 12px;
    }
    .vip_jf {
        background: url(/images/weixin2/vipcard03.png) 10% center no-repeat;
        background-size: 1.5rem;
        text-indent: 2.125rem;
    }
    .vip_jf em, .i_tip em {
        color: #ed4b4b;
    }
    em, i {
        font-style: normal;
    }
    .my_grow {
        border-top: 1px solid #e0e8f3;
        background: #fff;
        padding-bottom: 10px;
    }
    .card_lv {
        padding: 10% 0 2% 50%;
        overflow: hidden;
    }
    .card_lv .step_a {
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        background-color: @main-theme-color;
        margin-top: -15px;
        width: 80px;
        color: #fff;
        border-radius: 30px;
        margin-left: -30px;
        text-align: center;
        float: left;
    }
    .card_lv .progress_a {
        width: 40px;
        height: 1.125px;
        background-color: #e0e0e0;
        float: left;
        position: relative;
    }
    .card_lv .progress_a .pg-bar {
        height: 1.125px;
        width: 10px;
        background-color: @main-theme-color;
        position: absolute;
        top: 0;
        left: 0;
    }
    .card_lv .step_b {
        height: 24px;
        line-height: 24px;
        font-size: 12px;
        background-color: #e0e0e0;
        margin-top: -12px;
        color: #3e4b5d;
        border-radius: 30px;
        text-align: center;
        min-width: 60px;
        padding: 0 3px;
        float: left;
        position: relative;
    }
    .card_lv .step_b:after {
        content: '';
        display: block;
        height: 1.125px;
        background-color: #e0e0e0;
        width: 300px;
        position: absolute;
        top: 12px;
        left: 100%;
    }
    .my_grow .uplv_p {
        color: #637f98;
        font-size: 14px;
        margin-top: 10px;
        text-align: center;
    }
    .uplv_p {
        text-align: left !important;
        padding: 0 5%;
    }
    .pop-layer {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background: #fff;
        z-index: 999;
    }
    .pop-layer .pop-layer--box {
        position: absolute;
        height: 280px;
        width: 100%;
        left: 0;
        top: 50%;
        margin-top: -140px;
    }
    .pop-layer--box .qrcode {
        position: absolute;
        left: 50%;
        margin-left: -128px;
        /* top: 29.23%; */
    }
    .pop-layer .del {
        position: absolute;
        top: 12%;
        right: 7%;
        color: #ccc;
        font-size: 20px;
    }
</style>
